<template>
  <div class="contain">
    <div class="banner">
      <img v-lazy="img" alt="">
    </div>
    <ul class="lists">
      <li class="item" v-for="(item,index) in lists" :key="index" @click="goParam(index)">
        <div class="box">
          <img v-lazy="item.titlepic" alt="">
          <div class="msg">
            <p class="msg-title">{{item.title}}</p>
            <p class="text">{{item.brief}}</p>
          </div>
          <span></span>
          <div class="date">
            <p class="month">
              {{new Date(parseInt(item.addtime)).getMonth() + 1}}-{{new Date(parseInt(item.addtime)).getDay() + 1}}</p>
            <p class="year">{{new Date(parseInt(item.addtime)).getFullYear()}}</p>
          </div>
        </div>
      </li>
    </ul>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        v-bind:total="newsTotalCount">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import api from '@/axios.js'
  export default{
    data () {
      return {
        img: require('../assets/control.png'),
        lists: [],
        // 新闻总数
        newsTotalCount: 0,
        // 分页size
        pageSize: 10,
        pageNum: 1,
      }
    },
    methods: {
      // 分页size改变
      handleSizeChange(val) {
      },
      // 分页页数改变
      handleCurrentChange(val) {
        this.getNewsList(val);
      },
      goParam(index){
        index += (this.pageNum-1)*this.pageSize;
        this.$router.push({name: 'NewsDetial', params: {id: index}})
      },
      // 获取新闻列表
      getNewsList(pageNum) {
        this.pageNum = pageNum;
        api.getNewsList({
          pageNum: pageNum,
          pageSize: this.pageSize
        }).then(({data}) => {
          this.lists = data.list;
          this.newsTotalCount = data.total;
        }).catch(err => {
          this.$message.error(`获取数据失败`);
        });
      },
    },
    mounted(){
      this.getNewsList(1);
    }
  }
</script>
<style scoped>
  .contain {
    width: 85%;
    margin: 0 auto;
    font-size: 14px;
    color: #505050;
  }

  .banner img {
    width: 100%;
  }

  .lists {
    width: 100%;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .item {
    width: 48%;
    height: 150px;
    background: #f7f7f7;
    margin: 10px 0;
    cursor: pointer;
  }

  .box {
    height: 100%;
    position: relative;
  }

  .box img {
    width: 200px;
    height: 150px;
  }

  .box > img {
    float: left;
  }

  .box > span {
    display: inline-block;
    width: 1px;
    height: 50px;
    background: #b5b5b5;
    position: absolute;
    right: 115px;
    top: 35%;
    display: none;
  }

  .msg {
    width: 70%;
    height: 100%;
    display: inline-block;
    margin-left: 30px;
    vertical-align: middle;
  }

  .msg-title {
    font-size: 20px;
    text-align: left;
    margin-top: 40px;
  }

  .text {
    font-size: 14px;
    color: #949494;
    text-align: left;
    margin-top: 18px;
  }

  .msg-title, .text {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .date {
    position: absolute;
    right: 30px;
    top: 20%;
    display: inline-block;
    color: #949494;
    text-align: center;
    display: none;
  }

  .month {
    font-size: 36px;
  }

  .year {
    font-size: 24px;
  }

  .pagination {
    text-align: center;
    margin: 20px 0;
  }

  @media screen and (max-width: 1600px) {
    .msg {
      width: 64%;
    }
  }

  @media screen and (max-width: 1366px) {
    .msg {
      width: 58%;
    }
  }
</style>
